<template>
    <div class="echart" id="warnchart" :style="myChartStyle"></div>
    </template>
  
  <script>
  import * as echarts from "echarts";
  
  export default {
    // name: "warn-chart",
    
    data() {
    return {
      xData: [
        "异物告警","烟火告警"

      ], //横坐标
      yData: [523,123], //异物告警数量数据,烟火告警数据
     
      myChartStyle: {  width: "100%", height: "260px" } //图表样式
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      // 基本柱状图
      const option = {
        xAxis: [{
          data: this.xData,
          axisLabel: {
            show: true,
            textStyle: {color: '#ffffff'}
          },
          splitLine:{//去除网格线
            show:false},
          // splitArea : {show : false}//去除网格区域
          axisTick: {
            show: false,    // 是否显示坐标轴刻度
          },

        }],
        
        yAxis: [{
          show: true, //是否显示y轴
          axisLabel: {
            show: true,
            textStyle: {color: '#ffffff'}
          },
          splitLine:{//去除网格线
			      show:false},
          // splitArea : {show : false}//去除网格区域
        }],
        series: [
          {
            type: "bar", //形状为柱状图
            data: this.yData,
            name: "告警数量统计", // legend属性
            label: {
              // 柱状图上方文本标签，默认展示数值信息
              show: true,
              position: "top"
            },
            // backgroundStyle: {color: "#ffffff",},
            
            itemStyle: {
                color:"#FF7F50", 
            }
          },
        ]
      };
      const myChart = echarts.init(document.getElementById("warnchart"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  }
  };
  </script>
  
  